<template>
  <!-- 进度环-LimeUI -->
  <l-circle
    v-model:current="modelValue"
    :gapDegree="90"
    :strokeWidth="props.strokeWidth + 'rpx'"
    :trailWidth="props.strokeWidth + 'rpx'"
    trailColor="#000000"
    :percent="props.percentage"
    :dashboard="true"
    :stroke-color="strokeColor"
    :size="props.width + 'rpx'"
    :lineCap="props.strokeLinecap"
  >
    <view class="progress-slot">
      <uv-avatar
        v-if="props.src"
        size="112rpx"
        :src="props.src"
        mode="aspectFill"
      />
      <view class="progress-slot-text" v-else>
        <text class="text1">
          {{ colors.find(r => r.percentage === props.percentage).text1 }}
        </text>
        <text class="text2">
          {{ colors.find(r => r.percentage === props.percentage).text2 }}
        </text>
      </view>
    </view>
  </l-circle>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

const props = defineProps({
  // 进度条画布宽度
  width: {
    type: Number,
    default: 162,
  },
  // 进度条宽度
  strokeWidth: {
    type: Number,
    default: 14,
  },
  // 百分比
  percentage: {
    type: Number,
    default: 10,
  },
  // 两端形状
  strokeLinecap: {
    type: String,
    default: 'round',
  },
  src: {
    type: String,
    default: '',
  },
});

const modelValue = ref(0);

const colors = reactive([
  { color: '#FFDA58', percentage: 10, text1: '纯纯', text2: '新人' },
  { color: '#FFDA58', percentage: 30, text1: '进阶', text2: '新手' },
  { color: '#FE4626', percentage: 60, text1: '小有', text2: '所成' },
  { color: '#FE4626', percentage: 80, text1: '崭露', text2: '头角' },
  { color: '#FE4626', percentage: 100, text1: '百炼', text2: '成钢' },
]);

const strokeColor = computed(() => {
  let arr = [];
  switch (props.percentage) {
    case 10:
      arr = ['#FFDA58', '#FFDA58'];
      break;
    case 30:
      arr = ['#FFDA58', '#FFDA58'];
      break;
    case 60:
      arr = ['#FFDA58', '#FE4626'];
      break;
    case 80:
      arr = ['#FFDA58', '#FE4626'];
      break;
    default:
      arr = ['#FFDA58', '#FE4626'];
  }
  return arr;
});
</script>

<style lang="scss" scoped>
.progress-slot {
  transform: rotate(-90deg);
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  background-color: #ffaf16;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  &-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    .text1 {
      font-size: 28rpx;
      text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
    }
    .text2 {
      font-size: 35rpx;
      text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
